<template>
	<view>
		<view>
			<table-title content="缴费表详情"></table-title>
			<view class="record-id">单号：{{processNo}}</view>
			<view class="in-center">
				<small-title content="基本资料"></small-title>
				<view class="state-bar">
					<view class="state-msg">{{state}}</view>
				</view>
			</view>
			<view class="item-table">
				<view-item name="楼盘" :value="userMsg.userBuilding"></view-item>
				<view-item name="楼层" :value="userMsg.userFloor" :isLast="true"></view-item>
			</view>
			<small-title v-if="payType !== 2" :content="payType == 2 ? '缴费清单(点击查看水电详细)':'缴费清单'"></small-title>
			<view style="margin-bottom: 10rpx;margin-top: 20rpx;" @click="showMeterDetail">
				<text class="small-title-bak">缴费清单</text>
				<text style="color: #0000FF;">(点击查看水电详细)</text>
			</view>
			<view style="margin-left: 20rpx;margin-right: 20rpx;">
				<uni-table border stripe emptyText="暂无更多数据" >
				    <!-- 表头行 -->
				    <uni-tr>
						<uni-th style="width: 50rpx;" align="center">序号</uni-th>
				        <uni-th style="width: 50rpx;" align="center">收费项</uni-th>
				        <uni-th style="width: 50rpx;" align="center">描述</uni-th>
						<uni-th style="width: 50rpx;" align="center">单项总费用</uni-th>
				        <uni-th style="width: 50rpx;" align="center">本月费用</uni-th>
						<uni-th style="width: 50rpx;" align="center">上月费用</uni-th>
						<uni-th style="width: 50rpx;" align="center">滞纳金</uni-th>
				    </uni-tr>
				    <!-- 表格数据行 -->
				    <uni-tr v-for="(item,index) in goodList" :key="index">
				        <uni-td align="center">
							<view style="width: 60rpx;">{{index + 1}}</view>
						</uni-td>
				        <uni-td>
							<view style="width: 150rpx;">
								<textarea style="width: 150rpx;" :auto-height="true" :disabled="true" v-model="item.name" ></textarea>
							</view>
						</uni-td>
				        <uni-td>
							<view style="width: 150rpx;">
								<textarea style="width: 150rpx;" :auto-height="true" :disabled="true" v-model="item.desc" ></textarea>
							</view>
						</uni-td>
						<uni-td>
							<view style="width: 150rpx;">
								<input :disabled="true" type="number" v-model="item.allPrice" />
							</view>
						</uni-td>
						<uni-td>
							<view style="width: 150rpx;">
								<input :disabled="true" type="number" v-model="item.curPrice" />
							</view>
						</uni-td>
						<uni-td>
							<view style="width: 150rpx;">
								<input :disabled="true" type="number" v-model="item.lastPrice" />
							</view>
						</uni-td>
						<uni-td>
							<view style="width: 150rpx;">
								<input :disabled="true" type="number" v-model="item.lateFee" />
							</view>
						</uni-td>
				    </uni-tr>
				</uni-table>
			</view>
			<view class="cost-all">费用合计：{{price}} 元</view>
			<view v-if="detailShow">
				<view style="margin-bottom: 10rpx;margin-top: 20rpx;" @click="closeDetail">
					<text class="small-title-bak">历史水电使用情况</text>
					<text style="color: #0000FF;">(点击隐藏)</text>
				</view>
				<view style="margin-left: 20rpx;margin-right: 20rpx;">
					<uni-table border stripe emptyText="暂无更多数据" >
					    <!-- 表头行 -->
					    <uni-tr>
							<uni-th style="width: 60rpx;" align="center">月份</uni-th>
					        <uni-th v-for="index in maxElec" style="width: 50rpx;" align="center">{{ '电表' + index + '(度)' }}</uni-th>
					        <uni-th style="width: 130rpx;" align="center">公摊用电(度)</uni-th>
							<uni-th style="width: 50rpx;" align="center">用电单价</uni-th>
					        <uni-th style="width: 50rpx;" align="center">用水量(吨)</uni-th>
							<uni-th style="width: 50rpx;" align="center">用水单价</uni-th>
					    </uni-tr>
					    <!-- 表格数据行 -->
					    <uni-tr v-for="(item,index) in meterCcArray" :key="index">
					        <uni-td align="center">
								<view>{{ item.month }}</view>
							</uni-td>
					        <uni-td v-for="itemIndex in maxElec">
								<view>{{ (itemIndex - 1) < (item.electric.length) ? item.electric[(itemIndex - 1)] : '' }}</view>
							</uni-td>
					        <uni-td>
								<view>{{ item.publicElc }}</view>
							</uni-td>
							<uni-td>
								<view>{{ item.elcUnit }}</view>
							</uni-td>
							<uni-td>
								<view>{{ item.water }}</view>
							</uni-td>
							<uni-td>
								<view>{{ item.waterUnit }}</view>
							</uni-td>
					    </uni-tr>
					</uni-table>
				</view>
			</view>
			<view v-if="payType == 1" >
				<small-title content="租金到期日期"></small-title>
				<view class="small-title">
					<uni-datetime-picker type="date" :value="endDate" start="" end="" :disabled="true"></uni-datetime-picker>
				</view>
			</view>
			<small-title :isNeed="true" v-if="status !== 2" content="支付信息截图"></small-title>
			<image :class="chargeImg=='/static/uploadImg.png' ? 'pay-image' : 'pay-image-border'" :src="chargeImg" mode="scaleToFill" @tap='chooseImage'></image>
			<small-title content="处理进度"></small-title>
			<proccess-bar v-if="processFlag" :proccessList="proccessListDefult"></proccess-bar>
			<view v-if="status===0" class="mix-button">
				<view class="left-part">
					<button class="left-button" @click="qfConfirm(1)">确认已支付</button>
				</view>
				<view class="right-part">
					<button class="right-button" @click="open">驳回</button>
				</view>
			</view>
			<view style="height: 200rpx;"></view>
		</view>
		<uni-popup ref="popup" type="dialog">
		    <uni-popup-dialog mode="input" message="成功消息" title="请输入驳回理由" :duration="2000" :before-close="true" @close="close" @confirm="confirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>		

<script>
	import {
		ONLINE_SERVER_ADDRESS_BASE,
		myUploadFile,
		syncGetOrder
	} from "../../../util/network.js"
	import {
		processHistoryList
	} from "../../../util/common.js"
	export default{
		data() {
			return {
				status: -1,
				processFlag:false,
				recordId: -1,
				processNo:'待分配',
				state: '已受理',
				payway: [true, false],                                                            //支付方式
				userMsg:{'userName':'','userPhone':'','userCompany':'','userBuilding':'',
					'userFloor':'','userRoom':''},
				
				goodList:[],
				endDate:'',
				payType:0,
				price:0,
				chargeImg:'/static/uploadImg.png',                                     //支付信息截图
				chargeImgId:0,
				nopassReasons:'租户已确认并已上传支付截图',
				proccessList:[
					{'type':'firstCanvas','commentMsg':'发起申请','time':'2021-01-01 01:01:11'},
					{'type':'middleCanvas','commentMsg':'受理','time':'2020-02-02 02:02:22'},
					{'type':'lastCanvas','commentMsg':'办结','time':'2020-03-03 03:33:33'}
				],
				proccessListDefult:[],
				token:'',
				meterCcArray:[],
				maxElec:0,
				detailShow:false,
			}
		},
		methods: {
			showMeterDetail(){
				this.meterCcArray = []
				let a = syncGetOrder("meter-cc/qf-show")
				 a.then((res)=>{
					 console.log("异步",res)
					 if(res.data.code == 200){
						res.data.data.forEach(item => {
							let temp = {'month':'','electric':[],'publicElc':'','elcUnit':'','water':'','waterUnit':''}
							temp.month = item.useDate
							let tempArray = []
							try{
								tempArray = JSON.parse(item.electricity)
								tempArray.forEach(unit => {
									temp.electric.push(Number(unit.amount))
								})
								this.maxElec = this.maxElec < tempArray.length ? tempArray.length : this.maxElec
							}catch(e){
								//TODO handle the exception
							}
							temp.publicElc = item.publicElectricity
							temp.elcUnit = item.electricityUnitPrice
							temp.water = item.water
							temp.waterUnit = item.waterUnitPrice
							this.meterCcArray.push(temp)
						})
						this.detailShow = true
					}
				})
			},
			closeDetail(){
				this.detailShow = false
			},
			open() {
				this.$refs.popup.open()
			},
			/**
			 * 点击取消按钮触发
			 * @param {Object} done
			 */
			close() {
				// TODO 做一些其他的事情，before-close 为true的情况下，手动执行 close 才会关闭对话框
				// ...
				this.$refs.popup.close()
			},
			/**
			 * 点击确认按钮触发
			 * @param {Object} done
			 * @param {Object} value
			 */
			confirm(value) {
				this.$refs.popup.close()
				if(value == ""){
					uni.showModal({
						content:'理由不能为空',
						showCancel:false
					});
					this.$refs.popup.close()
				}else{
					this.nopassReasons = "驳回，理由：" + value
					this.qfConfirm(2)
					// TODO 做一些其他的事情，手动执行 close 才会关闭对话框
					// ...
					this.$refs.popup.close()
				}
			},
			chooseImage(){
				console.log("ceshi",this.state)
				if(this.status === 0) {
					uni.chooseImage({
						count: 1,
						sourceType: ['album', 'camera'],
						// #ifdef MP-WEIXIN
						sizeType: ['compressed'],
						// #endif
						success: (res) => {
							let a = myUploadFile(this.token, res.tempFilePaths[0])
							 a.then((v)=>{
								 this.chargeImgId = v
								 console.log("zuizhongid",this.chargeImgId)
							})
							this.chargeImg = res.tempFilePaths[0];
						}
					})
				}else{
					uni.previewImage({
						current: 0,
						urls: [this.chargeImg]
					})
				}
			},
			qfConfirm(status){
				console.log("[info]","缴费反馈：" + this.recordId)
				if(status == 1){
					if(!(this.chargeImgId > 0)){
						uni.showModal({
							content:'请点击上传支付截图',
							showCancel:false
						})
						return 0
					}
				}
				uni.request({
					url:`${ONLINE_SERVER_ADDRESS_BASE}/payment-notice/qf-confirm/` + this.recordId,
					header: {
						'Authorization': this.token,
					},
					data: {
						status:status,
						chargeImgId:this.chargeImgId,
						commentMsg: this.nopassReasons,                       //操作信息
					},
					method:'POST',
					success: function (res) {
						console.log("缴费反馈成功",res);
						if(res.data.code == 200){
							uni.navigateBack()
						}
					},
					fail: (res) => {
						console.log("缴费反馈调用失败")
					}
				})
			},
			
			getOrder(){
				let a = syncGetOrder("payment-notice/show/" + this.recordId)
				 a.then((res)=>{
					 console.log("异步",res)
					 if(res.data.code == 200){
						 this.status = parseInt(res.data.data.status)
						 switch(this.status) {
						      case 0:
						         this.state = "待用户确认"
						         break;
						      case 1:
						         this.state = "待财务收款"
						         break;
						 	 case 2:
						         this.state = "待财务提交"
						 	    break;
						 	 case 3:
						         this.state = "已缴费办结"
						 	    break;
						      default:
						         this.state = "待申请"
						 } 
						 this.processNo = res.data.data.processNo
						 this.goodList = JSON.parse(res.data.data.itemList)
						 this.payType = res.data.data.payType
						 this.price = res.data.data.price
						 try{
						 	 this.endDate = res.data.data.leaseTime.replace('T', ' ')
						 }catch(e){
						 	//TODO handle the exception
						 }
						 if(res.data.data.chargeImgId > 0){
							 this.chargeImgId = res.data.data.chargeImgId
							 this.chargeImg = ONLINE_SERVER_ADDRESS_BASE + '/file/preview/' + this.chargeImgId
						 }
						 this.proccessListDefult=processHistoryList(res.data.data.processDetail)
						 this.processFlag = true
					}
				})
			},
			
			back(){
				uni.navigateBack()
			},
		},
		onLoad(option) {
			//传入单号
			let userInfo = uni.getStorageSync('userinfo')
			if(userInfo != null){
				this.userMsg.userBuilding = userInfo.title
				this.userMsg.userFloor = userInfo.floor
				this.recordId = option.id
				this.token = uni.getStorageSync('token')
			}else{
				uni.navigateTo('../../login/login')
			}
		},
		mounted() {
			//如果是新建表单则不查询
			if(this.state != '待申请'){
				this.getOrder()
			}
		}
	}
</script>

<style>
	page{
		background-color: #F1F1F1
	}
	.record-id{
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
	}
	.state-bar{
		display: flex;
		align-items: center;
		color: #FFFFFF;
		background-color: #DD524D;
		width: 260rpx;
		justify-content: center;
		margin-left: auto;
		margin-right: 50rpx;
		font-size: 30rpx;
		border-radius: 50rpx;
		height: 50rpx;
	}
	.state-msg{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.item-table{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.mix-button{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.left-part{
		float: right;
	}
	.right-part{
		float: left;
	}
	.left-button{
		background-color: #FF0000;
		border-radius: 50rpx 0 0 50rpx;
		color: #FFFFFF;
		width: 300rpx;
		font-size: 30rpx;
	}
	.right-button{
		background-color: #0000FF;
		border-radius: 0 50rpx 50rpx 0;
		color: #FFFFFF;
		width: 300rpx;
		font-size: 30rpx;
	}
	.in-center{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.add-button {
		border-width: 0px;
		align-items: center;
		justify-content: center;
		margin: 30rpx 0 40rpx 250rpx;
		height: 50rpx;
		width: 250rpx;
		display: flex;
		color: #22B242;
	}
	.small-title{
		margin: 20rpx 0 20rpx 50rpx;
	}
	.cost-all{
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
	}
	.pay-image{
		margin: 0rpx 0 0rpx 50rpx;
		width: 130rpx;
		height: 130rpx;
	}
	.pay-image-border{
		border:2rpx solid;
		border-radius: 2px;
		margin: 20rpx 0 20rpx 50rpx;
		width: 126rpx;
		height: 126rpx;
	}
	.small-title-bak{
		color: #555555;
		margin: 40rpx 0 40rpx 50rpx;
	}
</style>
